<template>
	<div style="display: inline-block;">
		<!--点击按钮上传-->
		<el-upload
     	style="margin-left:10px;width:auto;display: inline-block;"
         :disabled="options.disabled"
         :action="uploadFileUrl"
         :show-file-list="false"
         :on-success="uppzSuccess"
         :before-upload="uppzBefore"
         :accept="options.accept"
         >
      
      <el-button 
      	size="mini">
      	<i class="iconfont icon-shangchuan"></i>
      	本地上传
      </el-button>
      
      <div class="upload-box" v-show="uploading">
      	 <el-progress :percentage="percentage"
 ></el-progress>
      </div>
 
    </el-upload>
		
	</div>
</template>

<script>
	import {apiUrls} from "@/service/components/common";
	
	export default {
		props : [
			"options"
		],
		mounted(){
			if(this.options.uploadFileUrl){
				this.uploadFileUrl = this.options.uploadFileUrl
			}
		},
		data(){
			return {
				value : "",
				uploadFileUrl : apiUrls.uploadFileUrl,
				uploading : false,
				percentage : 0 ,
			}
		},
		methods : {
			uppzSuccess(res, file) {
				if (res.code === 0) {
        	this.percentage = 100
          this.$emit("success","uploadBtn",{
          	res, file
					})
					this.$message.success('上传成功')
          this.percentage = 0
        } else {
        	this.percentage = 0
          this.$message.error('上传失败')
        }
        this.uploading = false;
			},
			uppzBefore(file){
				if(!this.uploading&&file){
      		this.uploading = true;
      	}
				setTimeout(() => {
	        if (this.percentage == 90) {
	          this.percentage = 90
	        } else {
	          this.percentage += 10
	          
	          if(this.percentage>=100){
	          	this.percentage = 100
	          }else{
	          	this.uppzBefore(false);
	          }
	        }
	      }, 300)
			},
		}
	}
	
</script>

<style>
</style>